<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表页</title>
    <script src="./js/jquery.1.11.3.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/list.css">
    <link rel="stylesheet" href="./css/icon/iconfont.css">
    <script src="./js/axios.js"></script>
    <script src="./js/cookie.js"></script>
</head>

<body>
    <header></header>
    <div class="list_full ">
        <div class="list">
            <!-- <div class="select_1">
                
            </div> -->
            <div class="select_2 ">
                <ul id="innter_str">
                    <!-- <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>
                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>

                    <li>
                        <div class="p1 ">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p2">
                            <img class="now_cl"
                                src="
                                https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                            <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </div>
                        <div class="p3">¥369</div>
                        <div class="p4">笔记本电脑</div>
                    </li>
 -->

                </ul>
            </div>
        </div>
    </div>
    <footer></footer>

</body>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");

    // $(".p2 img").click(function () {
    //     let index = $(this).index()
    //     // $(".b1 ul").stop().animate({
    //     //     left: index * -400
    //     // }, 500)
    //     $(this).addClass("now_cl");
    //     $(this).siblings().removeClass("now_cl");
    //     $(".p1").children().attr("src", $(this).attr("src"))

    // })

    let uid = getCookie("uid")
    //43391 43288
    $.get(`http://jx.xuzhixiang.top/ap/api/productlist.php?uid=43391`).then(res => {
        console.log(res.data);

        let str = "";
        //对img进行处理
        for (let p = 0; p < res.data.length; p++) {
            res.data[p].pimg = res.data[p].pimg.split(",")
        } /////


        for (let i = 0; i < res.data.length; i++) {

            //对img小图进行处理
            let str2 = ""
            for (let j = 0; j < res.data[i].pimg.length; j++) {
                if (res.data[i].pimg[j]) {
                    str2 += `
                            <img class="now_cl_" src="${res.data[i].pimg[j]}" alt="">
                            `
                }
            }
            /////
            str += `
             <li>
                 <div class="p1 ">
                    <a href="deteli.html?${res.data[i].pid}">
                     <img src="${res.data[i].pimg[0]}"
                         alt="" data_id="${res.data[i].pid}">
                    </a>   
                 </div>
                 <div class="p2">
                     ${str2}
                 </div>
                 <div class="p3">¥${res.data[i].pprice}</div>
                 <div class="p4"><a href="deteli.html?${res.data[i].pid}">${res.data[i].pname}
                 </a> </div>
             </li>      
            `
        }

        $("#innter_str").html(str);
    }).then(function () {

        $(".p2").delegate("img", "click", function () {
            $(this).addClass("now_cl");
            $(this).siblings().removeClass("now_cl");
            $(this).parent().prev().children().children().attr("src", $(this).attr("src"))
        })
        for (let k = 0; k < $(".p2").length; k++) {
            $(".p2").eq(k).children().eq(0).click()
        }
    })
</script>

</html>